'use client';

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { ScrollArea } from "@/components/ui/scroll-area";
import { MessageSquare } from 'lucide-react';
import { UserAvatar } from '../../shared/user-avatar';
import { UserRole } from '@/types';

export function MessagesContent() {
  return (
    <div className="grid gap-4 md:grid-cols-2">
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <MessageSquare className="h-5 w-5" />
            给孩子留言
          </CardTitle>
          <CardDescription>给孩子写一些鼓励的话</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <ScrollArea className="h-[300px] pr-4">
              <div className="space-y-4">
                <div className="bg-muted p-3 rounded-lg">
                  <div className="flex items-start gap-3">
                    <UserAvatar
                      name="张妈妈"
                      role={UserRole.PARENT}
                      size="sm"
                    />
                    <div className="flex-1">
                      <p className="text-sm">加油，小明！妈妈相信你一定能在这次考试中取得好成绩！</p>
                      <p className="text-xs text-muted-foreground mt-1">2024-03-18 08:30</p>
                    </div>
                  </div>
                </div>
                <div className="bg-primary/10 p-3 rounded-lg">
                  <div className="flex items-start gap-3">
                    <UserAvatar
                      name="张小明"
                      role={UserRole.PARENT}
                      size="sm"
                    />
                    <div className="flex-1">
                      <p className="text-sm">谢谢妈妈，我会努力的！</p>
                      <p className="text-xs text-muted-foreground mt-1">2024-03-18 12:30</p>
                    </div>
                  </div>
                </div>
              </div>
            </ScrollArea>
            <div className="flex gap-2">
              <input
                type="text"
                placeholder="写下你想说的话..."
                className="flex-1 min-h-[40px] rounded-md border border-input bg-background px-3 py-2 text-sm"
              />
              <Button>发送</Button>
            </div>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <MessageSquare className="h-5 w-5" />
            与老师交流
          </CardTitle>
          <CardDescription>与班主任和任课老师交流</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <ScrollArea className="h-[300px] pr-4">
              <div className="space-y-4">
                <div className="bg-muted p-3 rounded-lg">
                  <div className="flex items-start gap-3">
                    <UserAvatar
                      name="王老师"
                      role={UserRole.TEACHER}
                      size="sm"
                    />
                    <div className="flex-1">
                      <p className="text-sm">小明这周在数学课上表现很好，积极回答问题。</p>
                      <p className="text-xs text-muted-foreground mt-1">数学 - 王老师 · 2024-03-18</p>
                    </div>
                  </div>
                </div>
                <div className="bg-primary/10 p-3 rounded-lg">
                  <div className="flex items-start gap-3">
                    <UserAvatar
                      name="张妈妈"
                      role={UserRole.PARENT}
                      size="sm"
                    />
                    <div className="flex-1">
                      <p className="text-sm">谢谢王老师，请问有什么需要在家里特别注意的地方吗？</p>
                      <p className="text-xs text-muted-foreground mt-1">2024-03-18</p>
                    </div>
                  </div>
                </div>
              </div>
            </ScrollArea>
            <div className="flex gap-2">
              <input
                type="text"
                placeholder="请输入消息..."
                className="flex-1 min-h-[40px] rounded-md border border-input bg-background px-3 py-2 text-sm"
              />
              <Button>发送</Button>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
} 